<template>
  <mx-link
    :to="`${NEWS_PAGE_PATH_MAP[obj.news_type]}/${obj.news_id}`"
    class="click cursor-pointer small-news"
  >
    <div>
      <t-image
        class="cover img-cover mr-12"
        :class="{
            'vlog-cover': (obj.news_type || obj.newsType) == NEWS_TYPE.VLOG
          }"
        :src="(obj.thumbs && obj.thumbs[0]) || ''"
        alt=""
      />
    </div>

    <icon v-if="(obj.news_type || obj.newsType) != NEWS_TYPE.ARTICLE" class="video-btn" size="24px" name="ic_play" />
    <p class="title ov-2">
      {{ obj.title }}
    </p>
  </mx-link>
</template>

<script>
import TImage from './TImage.vue';
import { NEWS_TYPE, NEWS_PAGE_PATH_MAP } from '@/constants/index.js';

export default {
  components: { TImage },
  props: {
    obj: {
      type: Object,
      default: () => {}
    }
  },

  data() {
    return {
      NEWS_TYPE,
      NEWS_PAGE_PATH_MAP
    };
  }
};
</script>

<style lang="scss" scoped>
.small-news {
  width: 356px;
  height: 78px;
  display: flex;
  padding: 12px 16px;
  align-items: center;
  position: relative;

  .cover {
    width: 96px;
    height: 54px;
    border: 0.5px solid rgba(42, 60, 88, 0.1);
    border-radius: 8px;
  }

  .vlog-cover {
    width: 96px;
    height: 54px;
    padding: 0 28px;
    background: #000;
    border-radius: 8px;
  }

  .title {
    font-size: 15px;
    color: #0c0c1c;
    letter-spacing: 0;
    line-height: 22px;
    font-weight: 500;
  }

  .video-btn {
    position: absolute;
    top: 27px;
    left: 52px;
  }
}
</style>
